<template>
  <div class="comments-from">
    <div class="comments-form-body flex items-start">
      <div class="comments-form-user">
        <div class="comments-form-user-avatar no-img-placeholder-colorful no-img-placeholder-horizon">
          <img v-if="userInfo && userInfo.avatar" :src="userInfo.avatar" alt="用户头像" />
          <img v-if="!userInfo" src="https://blog-la.oss-cn-hangzhou.aliyuncs.com/blog/assets/no-data-bg-colorfu.png" alt="用户头像" />
        </div>
        <div v-if="userInfo && userInfo.nickname" class="comments-form-user-name">{{ userInfo.nickname }}</div>
        <el-button v-else theme="text" style="width: 60px;padding:4px 0;" @click="handleLogin">加入我们</el-button>
      </div>
      <div class="comments-form-content">
        <div class="comments-form-content-input">
          <textarea v-model="formData.comment" placeholder="愣着干嘛、不如一吐为快吧..." rows="5"></textarea>
        </div>
      </div>
    </div>
    <div class="comments-form-footer flex justify-between items-center">
      <div class="comments-form-footer-btns flex items-center">
        <button class="mo-btns"  @blur="handleBlur" >
          <SvgIcon icon='emotion' class="svg_icon" @click.native="handleClick" />
          <Emotion v-show="showDialog" class="emoji-picker" @emotion="handleEmotion" />
        </button>
        <span>{{ formData.comment ? formData.comment.length : 0 }} / 500</span>
      </div>
      <el-button :loading="isAddCommentLoading" theme="gradient" shape="rect" @click="handleComment">{{ replyId ? '回复' : '发布' }}</el-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import SvgIcon from "@/components/base/SvgIcon/SvgIcon.vue"
import Emotion from '@/components/base/Emotion/Emotion.vue'
import { useUserStore } from '@/store/useUserStore'

export default {
  name: 'CommentBox',
  components: {
    SvgIcon,
    Emotion
  },
  props: {
    type: {
      type: String,
      default: 'comment'
    },
    replyId: {
      type: [String,Number],
      default: ''
    },
    articleId: {
      type: Number,
      default: null
    }
  },
  setup() {
    const state = reactive({
      showDialog: false,
      isAddCommentLoading: false,
      formData: {
        comment: ''
      }
    })
    const userStore = useUserStore()
    const userInfo = computed(() => {
      return userStore.userInfo
    })
    return {
      ...toRefs(state),
      userInfo
    }
  },
  mounted() {
    if (!document.querySelector('#address')) {
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.id = 'address'
      script.src = 'https://pv.sohu.com/cityjson?ie=utf-8'
      document.head.appendChild(script)
    }
  },
  methods: {
    /* 添加表情 */
    handleEmotion(emoji) {
      this.formData.comment += `[${emoji.text}]`
    },

    /* 打开表情窗口 */
    handleClick() {
      this.showDialog = !this.showDialog
    },

    /* blur关闭表情窗口 */
    handleBlur() {
      this.showDialog = false
    },

    /* 评论前要求登录 */
    handleLogin() {
      this.$router.push(`/signIn?redirect=${this.$route.fullPath}`)
    },

    /* 评论 */
    handleComment() {
      if(!this.userInfo) return this.handleLogin()
      this.requestMessages()
    },

    /* 留言与评论 */
    async requestMessages() {
      if (!this.formData.comment.trim()) return this.$toast.error('请输入评论内容')
      const params = { comment: this.formData.comment, ip: window.returnCitySN.cip, address: window.returnCitySN.cname }
      this.replyId && (params.replyId = this.replyId)
      this.articleId && (params.articleId = this.articleId)
      this.isAddCommentLoading = true
      try {
        await this.$API.comment.reply(params)
        this.formData.comment = ''
        this.$emit('on-success')
        this.isAddCommentLoading = false
      } catch (error) {
        this.isAddCommentLoading = false
      }
    },

    toggleSignIn() {
      this.$router.push('/signIn')
    }
  }
}
</script>

<style lang="less" scoped>
.comments-form {
  &-user {
    flex: none;
    text-align: center;
    margin-right: 15px;
    &-avatar {
      height: 50px;
      width: 50px;
      border-radius: 50%;
      margin: 0 auto;
      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    &-name {
      margin-top: 4px;
      display: block;
      width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  &-content {
    position: relative;
    flex: 1;
    border: 1px solid @colorBorder;
    &-input {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      &::before {
        content: '';
        position: absolute;
        display: block;
        width: 14px;
        height: 14px;
        top: 14px;
        left: -8px;
        border: 1px solid @colorBorder;
        border-width: 0 0 1px 1px;
        background-color: #fff;
        transform: rotate(45deg);
      }
      textarea {
        all: unset;
        display: block;
        height: 100%;
        width: 100%;
        padding: 10px;
        word-break: break-word;
        box-sizing: border-box;
      }
    }

    &:focus-within {
      border: 1px solid @colorPrimary;
    }
    &:focus-within ::before {
      border: 1px solid @colorPrimary;
      border-width: 0 0 1px 1px;
    }
  }
  &-footer {
    margin-top: 10px;
    padding-left: 75px;
    &-btns {
      z-index: 100;
      color: #ccc;
      .mo-btns {
        padding: 0;
        position: relative;
        border: none;
        outline: none;
        background: none;
        margin-right: 20px;
        .svg_icon{
          color: #ccc;
        }
        i {
          font-size: 30px;
          color: #ccc;
        }
        &:hover {
          i {
            @colorActive();
          }
        }
      }
      .emoji-picker {
        position: absolute;
        top: 40px;
        left: 0;
      }
    }
  }
}
@media only screen and (max-width: @containerMaxWidth-sm) {
  .emoji-picker {
    left: -70px !important;
  }
}
</style>
